<template>
    <div v-if='show.flag' :style='{opacity: o}' class='container-mask' @click='handleClick'>
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: 'popModelChange',
    props:['show','maskClose'],
    data(){
        return {
            o:0
        }
    },
    watch:{
        'show.flag'(n,o){
            if(n){
                setTimeout(()=>{
                    this.o = 1
                },100)
            }
        }
    },
    methods:{
        handleClick(){
            if(this.maskClose === '' || this.maskClose === true){
                this.show.flag = false
            }
        },
    }
};
</script>
<style scoped lang='less'>
.container-mask{
    transition: all .3s ease;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.7);
}
</style>
